enyo.kind({
	name: "enyo.CreateAssessmentDevice",
	kind: enyo.PanelBase,
	devicePageSize: 5,
	devicePageNumber: 1,
	devicePageCount: 1,
	
	components: [
		{kind: "PanelContent", headerContent: "Choose Devices", onSignOut: "doSignOut", submitLeftContent: "Next", onSubmitLeft: "submitLeft", onBack: "back", flex: 1, components: [
			{className: "margin-medium", components: [
				{kind: "Group", caption: "", components:[
					{kind: "Picker", name: "countryPicker", caption: "Choose Country", value: "-1", items: [], onChange: "countryPickerChanged", className: "bold"},
				]},
				{kind: "Group", name: "cityGroup", caption: "", components:[
					{kind: "Picker", name: "cityPicker", caption: "Choose City", value: "-1", items: [], onChange: "cityPickerChanged", className: "bold"},
				]},
				{kind: "Group", name: "customerGroup", caption: "", components:[
					{kind: "Picker", name: "customerPicker", caption: "Choose Customer", value: "-1", items: [], onChange: "customerPickerChanged", className: "bold"},
				]},
				{kind: "RowGroup", name: "deviceGroup", defaultKind: "HFlexBox", caption: "Devices", components:[
					{kind: "VirtualRepeater", name: "deviceRepeater", onSetupRow: "deviceRepeaterSetupRow", components: [
						{kind: "Item", layoutKind: "HFlexLayout", /*onclick: "listItemClick",*/ style: "border: none", components: [
							{name: "info", flex: 1, kind : "DividerDrawer", caption : "", open: false, components : [
								{name: "deviceNameContent", content : "", className: "divider-content"}, 
								{name: "collectionTimeContent", content : "", className: "divider-content"}, 
								{name: "systemNameContent", content : "", className: "divider-content"}, 
								{name: "systemVersionContent", content : "", className: "divider-content"}
							]},
							{kind: "CheckBox", name: "deviceCheckBox", onclick: "deviceCheckBoxClicked"},
							{name: "moreButton", content : "Tap Here to Load More...", style: "margin: 5px 0px 5px 10px; font-weight: bold; font-style: italic;", onclick: "moreButtonClicked", showing: false}, 
						]}
					]}
				]}
			]}
		]},
		{name: "countryCityService", kind: "WebService", method: "POST", onSuccess: "countryCityServiceGot", onFailure: "countryCityServiceGotFailure"},
		{name: "customerListService", kind: "WebService", method: "POST", onSuccess: "customerListServiceGot", onFailure: "customerListServiceFailure"},
		{name: "deviceListService", kind: "WebService", method: "POST", onSuccess: "deviceListServiceGot", onFailure: "deviceListServiceFailure"}
	],
	
	create: function() {
		this.inherited(arguments);
		this.initPanel();
	},
	
	submitLeft: function() {
		if(this.getSelectedDeviceCount() == 0) {
			//validation
			this.doError("No device is selected");
			return;
		}
		
		this.parentWnd.switchView("create_summary");
	},
	
	back: function() {
		this.parentWnd.switchView("create_type");
	},
	
	initPanel: function()
	{
		this.showScrim();
	
		//reset the controls display and status
		enyo.Data.payload_CountryCities = null;
		enyo.Data.payload_Customers = null;
		enyo.Data.payload_Devices = null;
		enyo.Data.selected_CountryName = null;
		enyo.Data.selected_CityName = null;
		enyo.Data.selected_CustomerOrgSiteKey = null;
		//this.selectedDeviceIndex = -1;
		this.$.deviceRepeater.render();
		this.$.deviceNameContent.setContent("");
		this.$.systemNameContent.setContent("");
		this.$.systemVersionContent.setContent("");
		this.$.collectionTimeContent.setContent("");
		this.$.countryPicker.setItems([]);
		this.$.countryPicker.setCaption("Choose Country");
		this.$.cityPicker.setItems([]);
		this.$.cityPicker.setCaption("Choose City");
		this.$.customerPicker.setItems([]);
		this.$.customerPicker.setCaption("Choose Customer");
		
		//hide the groups
		this.$.cityGroup.setShowing(false);
		this.$.customerGroup.setShowing(false);
		this.$.deviceGroup.setShowing(false);
		
		//call the service
		this.$.countryCityService.setUrl(enyo.Config.getServiceUrl_RetrieveCountryCities());
		this.$.countryCityService.setHeaders(enyo.Config.getCommonServiceHeader());
		this.$.countryCityService.call();
			
		//var selectedPayloadValue = parent.$.panel_create_type.selectedPayload.id;
		//this.$.getResponse.call({value0: selectedPayloadValue});
	},
	
	countryCityServiceGot: function(inSender, inResponse, inRequest) {
		if(inResponse.statusCode === 200) {
			var json = enyo.json.parse(inResponse.payload);
			enyo.Data.payload_CountryCities = json;
			
			//show country selection
			var countries = [];
			for (var key in enyo.Data.payload_CountryCities) {
				countries.push(key);
			}
			countries.sort();
			this.$.countryPicker.setItems(countries);
			this.hideScrim();	//finally, initialize work done, chagne the UI
		}
		else {
			this.doError("Error response of service (StatusCode: " + inResponse.statusCode + ")");
		}
	},
	
	countryCityServiceGotFailure: function(inSender, inResponse, inRequest) {
		this.doError("Failed calling service");
	},
	
	countryPickerChanged: function(inSender, inIndex) {
		//show cities or selected country
		enyo.Data.selected_CountryName = this.$.countryPicker.getValue();
		if(enyo.Data.payload_CountryCities.hasOwnProperty(enyo.Data.selected_CountryName)) {
			var sortedCities = enyo.Data.payload_CountryCities[enyo.Data.selected_CountryName];
			sortedCities.sort();
			this.$.cityPicker.setItems(sortedCities);
			this.$.cityPicker.setCaption("Choose City");
		}
		
		//hide customer selection and show city selection
		this.$.cityGroup.setShowing(true);
		this.$.customerGroup.setShowing(false);
	},
	
	cityPickerChanged: function(inSender, inIndex) {
		enyo.Data.selected_CityName = this.$.cityPicker.getValue();
		
		this.showScrim();
		
		var obj = new Object;
		obj.value0 = enyo.Data.selected_CountryName;
		obj.value1 = enyo.Data.selected_CityName;
		
		//call the service
		this.$.customerListService.setUrl(enyo.Config.getServiceUrl_RetrieveCustomers());
		this.$.customerListService.setHeaders(enyo.Config.getCommonServiceHeader());
		this.$.customerListService.call(obj);
		
		//this.$.customerListService.call({value0: enyo.Data.selected_CountryName, value1: enyo.Data.selected_CityName});
	},
	
	customerListServiceGot: function(inSender, inResponse, inRequest) {
		if(inResponse.statusCode === 200) {
			enyo.Data.payload_Customers = inResponse.payload;
			
			//show customers selection
			this.$.customerGroup.setShowing(true);
			var customers = [];
			for(var i = 0; i < enyo.Data.payload_Customers.length; i++)
			{
				customers.push({caption: enyo.Data.payload_Customers[i].customerName, value: enyo.Data.payload_Customers[i].orgSiteIntKey});
			}
			this.$.customerPicker.setItems(customers);
			this.$.customerPicker.setCaption("Choose Customer");
			this.hideScrim();	//finally, initialize work done, chagne the UI
		}
		else {
			this.doError("Error response of service (StatusCode: " + inResponse.statusCode + ")");
		}
	},
	
	customerListServiceFailure: function(inSender, inResponse, inRequest) {
		this.doError("Failed calling service");
	},
	
	customerPickerChanged: function(inSender, inIndex) {
		enyo.Data.selected_CustomerOrgSiteKey = this.$.customerPicker.getValue();
		
		enyo.Data.payload_Devices = null;
		
		this.showScrim();
		
		this.devicePageNumber = 1;
		var obj = new Object;
		obj.value0 = enyo.Data.selected_CustomerOrgSiteKey;
		obj.value1 = this.devicePageSize;
		obj.value2 = this.devicePageNumber;
		
		//call the service
		this.$.deviceListService.setUrl(enyo.Config.getServiceUrl_RetrieveDevices());
		this.$.deviceListService.setHeaders(enyo.Config.getCommonServiceHeader());
		this.$.deviceListService.call(obj);
			
		//this.$.deviceListService.call({value0: this.$.customerPicker.getValue()});
	},
	
	deviceListServiceGot: function(inSender, inResponse, inRequest) {
		if(inResponse.statusCode === 200) {
			if(enyo.Data.payload_Devices == null) {
				enyo.Data.payload_Devices = new Array();
				enyo.Data.payload_Devices.payloadChecked = new Array();
			}
			
			if(inResponse.payload.deviceList == null) {
				this.doError("No item found");
			} else {
				for(var i = 0; i< inResponse.payload.deviceList.length; i++) {
					enyo.Data.payload_Devices.push(inResponse.payload.deviceList[i]);
					enyo.Data.payload_Devices.payloadChecked.push(false);
				}
			}
			
			//store the page count
			this.devicePageCount = inResponse.payload.pageCount;
			
			//show device list
			this.$.deviceRepeater.render();
			this.$.deviceGroup.setShowing(true);
			
			this.hideScrim();	//finally, initialize work done, chagne the UI
		}
		else {
			this.doError("Error response of service (StatusCode: " + inResponse.statusCode + ")");
		}
	},
	
	deviceListServiceFailure: function(inSender, inResponse, inRequest) {
		this.doError("Failed calling service");
	},
	
	deviceRepeaterSetupRow: function(inSender, inIndex) {
		if(enyo.Data.payload_Devices == null) return;	//device list not loaded
		if (inIndex < enyo.Data.payload_Devices.length) {
			//var isRowSelected = (inIndex == this.selectedDeviceIndex);
			//this.$.item.applyStyle("background", isRowSelected ? "#000" : null);
			this.$.info.setCaption(enyo.Data.payload_Devices[inIndex].hostname);
			this.$.deviceCheckBox.setChecked(enyo.Data.payload_Devices.payloadChecked[inIndex]);
			
			this.$.deviceNameContent.setContent("[Host Name]"  + enyo.Data.payload_Devices[inIndex].hostname);
			this.$.systemNameContent.setContent("[System Name]"  + enyo.Data.payload_Devices[inIndex].systemName);
			this.$.systemVersionContent.setContent("[System Version]"  + enyo.Data.payload_Devices[inIndex].systemVersion);
			var colTime = new Date(enyo.Data.payload_Devices[inIndex].collectionTimestamp);
			this.$.collectionTimeContent.setContent("[Collection Time]"  + colTime);
			
			this.$.moreButton.setShowing(false);
			this.$.info.setShowing(true);
			this.$.deviceCheckBox.setShowing(true);
		
			return true;
		}
		else if(inIndex == enyo.Data.payload_Devices.length && this.devicePageNumber < this.devicePageCount && inIndex != 0) {
			this.$.moreButton.setShowing(true);
			this.$.info.setShowing(false);
			this.$.deviceCheckBox.setShowing(false);
			return true;
		}
	},
	
	/*
	listItemClick: function(inSender, inEvent) {
		this.$.groupInfo.setShowing(true);
		this.selectedDeviceIndex = inEvent.rowIndex;
		enyo.Data.payload_Devices.payloadChecked[inEvent.rowIndex] = !enyo.Data.payload_Devices.payloadChecked[inEvent.rowIndex];
		this.$.deviceRepeater.render();
		
		this.$.deviceNameContent.setContent(enyo.Data.payload_Devices[inEvent.rowIndex].hostname);
		this.$.systemNameContent.setContent(enyo.Data.payload_Devices[inEvent.rowIndex].systemNameContent);
		this.$.systemVersionContent.setContent(enyo.Data.payload_Devices[inEvent.rowIndex].systemVersionContent);
		var expTime = new Date(enyo.Data.payload_Devices[inEvent.rowIndex].expirationTimestamp);
		this.$.collectionTimeContent.setContent(expTime);
	},
	*/
	
	moreButtonClicked: function() {
		this.showScrim();
		
		this.devicePageNumber ++;
		var obj = new Object;
		obj.value0 = enyo.Data.selected_CustomerOrgSiteKey;
		obj.value1 = this.devicePageSize;
		obj.value2 = this.devicePageNumber;
		
		//call the service
		this.$.deviceListService.setUrl(enyo.Config.getServiceUrl_RetrieveDevices());
		this.$.deviceListService.setHeaders(enyo.Config.getCommonServiceHeader());
		this.$.deviceListService.call(obj);
	},
	
	deviceCheckBoxClicked: function(inSender, inEvent)
	{
		var selectedIndex = inEvent.rowIndex;
		enyo.Data.payload_Devices.payloadChecked[inEvent.rowIndex] = !enyo.Data.payload_Devices.payloadChecked[inEvent.rowIndex];
	},
	
	getSelectedDeviceCount: function() {
		var count = 0;
		if(enyo.Data.payload_Devices == null) {
			return count;
		}
		for(var i = 0; i < enyo.Data.payload_Devices.length; i++) {
			if(enyo.Data.payload_Devices.payloadChecked[i]) {
				count ++;
			}
		}
		return count;
	}
});